<template>
  <div class="box">
    <div class="title_box">
      <div class="back" @click="back">
        <img src="../assets/img/上一页.png" alt="" />
      </div>
      <div class="title">任 务</div>
    </div>
    <div class="card" v-for="item in tableData" :key="item">
      <div class="LeftBox">
        <div class="mess1">
          <div class="mess2">归属账号</div>
          <div class="mess3" style="color:red">{{ item.account }}</div>
        </div>
        <div class="mess1">
          <div class="mess2">交易所</div>
          <div class="mess3">{{ item.exchange }}</div>
        </div>
        <div class="mess1">
          <div class="mess2">品种代码</div>
          <div class="mess3" style="color: #fe0030">{{ item.symbol }}</div>
        </div>
        <div class="mess1">
          <div class="mess2">策略名称</div>
          <div class="mess3" style="color: #4b8bff">
            {{ item.indicator_name }}
          </div>
        </div>
      </div>
      <div class="RightBox">
        <div class="mess1">
          <div class="mess4">策略周期</div>
          <div class="mess5">{{ item.period_type }}</div>
        </div>
        <div class="mess1">
          <div class="mess4">任务状态</div>
          <div class="mess5">{{ item.status }}</div>
        </div>
        <div class="mess1">
          <div class="mess4">开仓方式</div>
          <div class="mess5">{{ item.trigger_method }}</div>
        </div>
        <div class="mess1">
          <div class="mess4">交易网关</div>
          <div class="mess5">{{ item.gw_type }}</div>
        </div>
        <div class="mess1">
          <div class="mess4">创建时间</div>
          <div class="mess5">
            {{ (item.create_time * 1000) | dateFormat }}
          </div>
        </div>
      </div>
    </div>
    <div class="shadow"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  computed: {
    tableData() {
      return this.$store.state.data2
    }
  },
  methods: {
    back() {
      this.$router.push('/home')
    }
  }
}
</script>
<style Lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  background-color: #0e0c22;
}
.title_box {
  height: 49px;
  align-items: center;
  background-color: black;
  width: 375px;
  display: flex;
  flex-direction: row;
}
.back {
  color: #ffffff;
  margin-left: 10px;
}
.title {
  color: #00ffff;
  margin: 5px auto 5px auto;
  font-size: 22px;
}
.card {
  margin: 30px 15px 0px 15px;
  background-color: #201e33;
  color: #ffffff;
  font-family: PingFang SC;
  margin-top: 0;
  margin-bottom: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
}
.LeftBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 3;
}
.RightBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 4;
}
.mess1 {
  display: flex;
  flex-direction: row;
}
.mess2 {
  letter-spacing: 2px;
  font-size: 13px;
  font-family: PingFang-SC-Regular;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess3 {
  font-size: 10px;
  margin: 6px -10px 6px 2px;
  flex: 1.2;
  display: flex;
  flex-direction: row;
}
.mess4 {
  letter-spacing: 2px;
  font-size: 13px;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess5 {
  font-size: 10px;
  margin: 6px -10px 6px 2px;
  flex: 2;
  display: flex;
  flex-direction: row;
}
.shadow {
  width: 100%;
  max-width: 375px;
  height: 100%;
  position: fixed;
  top: 500px;
  background: linear-gradient(
    rgba(14, 12, 34, 0) 0,
    rgba(14, 12, 34, 0.5) 10%,
    rgba(14, 12, 34, 1) 100%
  );
}
</style>
